<template>
	<div>
		<breadcrumb :queryActive="'second'"></breadcrumb>
		<div class="titleBox">
			<!-- icon-dingdan -->
			<div class="iconfontcolor icon-dingdan"></div>
			<div class="infoBox">
				<div class="info_line1">
					<h3 class="tit">付款单{{ result.statementOdd }}</h3>
					<div class="tag" style="background-color: #fffce8; color: #f8b030"
						v-if="result.settlementStatus == 1">
						待结算
					</div>
					<div class="tag" v-else>已结算</div>
				</div>
				<div class="info_line2">
					<div style="margin-right: 15px">
						创建时间：{{ result.createTime }}
					</div>
				</div>
			</div>

			<button class="examineBtn" v-if="result.settlementStatus == 1" @click="isShowDialog(result)">
				<span>{{result.settlementFormType==0?"结算":"审核"}}</span>
			</button>

			<div class="feeGroup" v-else>
				<div class="feeBox">
					<div class="intervalLine"></div>
					<div class="feeItem">
						<div class="tit">承运金额</div>
						<div class="price">{{ result.billAmount ? result.billAmount : '--.--' }}</div>
					</div>
				</div>
				<div class="feeBox">
					<div class="intervalLine"></div>
					<div class="feeItem">
						<div class="tit">结算金额</div>
						<div class="price" style="color: #1890ff">
							{{ result.settlementAmount!=null ? result.settlementAmount : '--.--' }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="main_item">
				<titleVue :title="'订单信息'"></titleVue>
				<el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
          color: '#939393',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">


					<!--          <el-descriptions-item label="关联运单">{{-->
					<!--            result.waybillNo-->
					<!--          }}</el-descriptions-item>-->
					<el-descriptions-item label="订单编号">{{
            result.orderNo
          }}</el-descriptions-item>
					<el-descriptions-item label="货主名称">{{
              result.ownerName}}</el-descriptions-item>
					<el-descriptions-item label="项目名称">{{
            result.projectName
          }}</el-descriptions-item>
					<el-descriptions-item label="计价方式">
						<div v-if="result.pricingMethod == 1">按里程</div>
						<div v-else-if="result.pricingMethod == 2">按量</div>
					</el-descriptions-item>

					<el-descriptions-item label="计量单位">
						<!-- 计量单位(参考measure_unit_type)1,车2,吨3,件 -->
						<div v-if="result.measureUnit == 1">车</div>
						<div v-else-if="result.measureUnit == 2">吨</div>
						<div v-else-if="result.measureUnit == 3">件</div>
					</el-descriptions-item>
					<el-descriptions-item label="运量">{{
              result.cargoWeight
            }}</el-descriptions-item>
					<el-descriptions-item label="业务类型">
						<div v-if="result.orderType == 1">拉货/搬家</div>
						<div v-else-if="result.orderType == 2">承运订单</div>
						<div v-else-if="result.orderType == 3">C端承运订单</div>
						<div v-else-if="result.orderType == 4">撮合订单</div>
						<div v-else-if="result.orderType == 5">撮合订单</div>
					</el-descriptions-item>
					<el-descriptions-item label="订单总金额">{{ waybillInfo.orderTotalAmount}}元</el-descriptions-item>
					<!--          <el-descriptions-item label="司机姓名">{{-->
					<!--            result.driverName-->
					<!--          }}</el-descriptions-item>-->
					<!--          <el-descriptions-item label="联系电话">{{-->
					<!--            result.phoneNumber-->
					<!--          }}</el-descriptions-item>-->
				</el-descriptions>
			</div>
			<div class="main_item">
				<titleVue :title="'运单信息'"></titleVue>
				<el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
          color: '#939393',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
					<el-descriptions-item label="运单编号">
						<div>
							<a type="text" size="small"
								@click="GoWaybillDetail(result.waybillId)">{{ waybillInfo.waybillNo }}</a>
							<!--                <el-button type="text" size="small" @click="GoWaybillDetail(result.waybillId)">{{ waybillInfo.waybillNo }}</el-button>-->
						</div>
					</el-descriptions-item>
					<el-descriptions-item label="运单状态">
						<div v-if="waybillInfo.waybillStatus == 1">
							<div class="text">未发布</div>
						</div>
						<!-- HANG_UP( code: 2， info:"挂起")，PAYING( code: 3， info:"等待付款")PAID( code: 4，info:"已付款") -->
						<div v-if="waybillInfo.waybillStatus == 4 ||
                  waybillInfo.waybillStatus == 2 ||
                  waybillInfo.waybillStatus == 3
                  ">
							<div class="text">未起运</div>
						</div>
						<div v-if="waybillInfo.waybillStatus == 5 ||
                  waybillInfo.waybillStatus == 6
                  ">
							<!--  SHIPMENTING( code: 5,SHIPMENTED( code: 6info:"已发货")-->
							<div class="text">运输中</div>
						</div>
						<div v-if="waybillInfo.waybillStatus == 7">
							<!-- WAITING_PAY( code: 7，info:"等待到付") -->
							<div class="text">已送达</div>
						</div>
						<div v-if="waybillInfo.waybillStatus == 8 ||
                  waybillInfo.waybillStatus == 9
                  ">
							<!-- TO_SIGN( code: 8，info:"待签收")，WAITING_RECEIPT( code: 9，info:"等待签收回单”) -->
							<div class="text">待签收</div>
						</div>
						<div v-if="waybillInfo.waybillStatus == 11 ||
                  waybillInfo.waybillStatus == 10
                  ">
							<!-- COMPLETED( code: 11， info:"已完成") code:10 已签收 -->
							<div class="text">已完成</div>
						</div>
						<div class="tag Canceled" v-if="waybillInfo.waybillStatus == 12">
							<!-- CANCEL( code: 12， info:"订单取消"]; -->
							<div class="dian"></div>
							<div class="text">已取消</div>
						</div>
					</el-descriptions-item>
					<el-descriptions-item label="是否准点">{{ waybillInfo.punctuality==1?'是':'否'}}</el-descriptions-item>
					<el-descriptions-item label="司机姓名">{{ result.driverName}}</el-descriptions-item>
					<el-descriptions-item label="司机电话">{{ result.phoneNumber}}</el-descriptions-item>
					<el-descriptions-item label="车牌号">{{ waybillInfo.numberplate}}</el-descriptions-item>
					<el-descriptions-item label="运单金额">{{ result.billAmount +'元' || '--.--' }}</el-descriptions-item>
					<el-descriptions-item
						label="是否使用优惠券">{{ waybillInfo.useCoupon!=0?waybillInfo.useCoupon!=null?'是':'否':'否'}}</el-descriptions-item>
					<el-descriptions-item
						label="使用优惠券后金额">{{ waybillInfo.useCoupon!=0?waybillInfo.couponAmount:"0"}}元</el-descriptions-item>
					<el-descriptions-item
						label="承运车辆">{{ result.settlementFormType==1?"":waybillInfo.brandModel + '-' +  waybillInfo.vehicleType}}</el-descriptions-item>
					<el-descriptions-item label="车辆规格">{{ waybillInfo.specification}}</el-descriptions-item>
					<el-descriptions-item
						label="货物数量">{{ waybillInfo.cargoQuantity==null?"无":waybillInfo.cargoQuantity }}</el-descriptions-item>
					<!--          <el-descriptions-item label="运量">{{ waybillInfo.cargoWeight }}</el-descriptions-item>-->
					<!--          <el-descriptions-item label="计量单位">-->
					<!--            &lt;!&ndash; 计量单位(参考measure_unit_type)1,车2,吨3,件 &ndash;&gt;-->
					<!--            <div v-if="result.measureUnit == 1">车</div>-->
					<!--            <div v-else-if="result.measureUnit == 2">吨</div>-->
					<!--            <div v-else-if="result.measureUnit == 3">件</div>-->
					<!--          </el-descriptions-item>-->
					<el-descriptions-item label="起运时间">{{ waybillInfo.startTime}}</el-descriptions-item>
					<el-descriptions-item label="装车完成时间">{{ waybillInfo.loadingTime}}</el-descriptions-item>
					<el-descriptions-item label="运单完成时间">{{ waybillInfo.finishTime}}</el-descriptions-item>
					<el-descriptions-item label="发布运单时间">{{ waybillInfo.createTime }}</el-descriptions-item>
					<el-descriptions-item label="卸货点">{{ result.addr }}</el-descriptions-item>
				</el-descriptions>
			</div>

			<div class="main_item" v-if="result.steelState == 0">
				<titleVue :title="'结算费用'"></titleVue>
				<el-descriptions class="descriptionsInfo" :column="3" border :labelStyle="{
          color: '#262626',
          backgroundColor: '#DDDDDD',
          width: '120px',
          height: '40px',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
          padding: '10px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
					<el-descriptions-item label="司机金额">{{
            result.orderAmount + "元"
          }}</el-descriptions-item>
					<el-descriptions-item label="平台结算金额">{{
            result.payAmount + "元"
          }}</el-descriptions-item>
					<el-descriptions-item label="保费">无</el-descriptions-item>
				</el-descriptions>
			</div>


			<div class="main_item">
				<titleVue :title="'定位信息'"></titleVue>
				<el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
          color: '#939393',
          height: '40px',
          fontSize: '12px',
          fontWeight: 'bold',
          padding: '10px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
  lineHeight: '40px',
}">
					<el-descriptions-item label="是否定位车辆">否</el-descriptions-item>
					<el-descriptions-item label="是否定位司机">否</el-descriptions-item>
					<el-descriptions-item label="轨迹状态">无</el-descriptions-item>
					<el-descriptions-item label="车辆定位数量">0</el-descriptions-item>
					<el-descriptions-item label="司机定位数量">0</el-descriptions-item>
					<el-descriptions-item label="异常原因">无</el-descriptions-item>
				</el-descriptions>
			</div>
		</div>
		<!-- 邀请司机弹出框 -->
		<div>
			<el-dialog title="司机结算" :visible.sync="dialogSettlement" width="500px" center>
				<el-form class="driverList" ref="SettlementForm" :model="SettlementForm" :rules="SettlementRules"
					label-width="100px">
					<el-form-item v-if="result.settlementFormType==1" label="项目名称" prop="projectName">
						<div style="width: 300px">
							<el-input v-model="SettlementForm.projectName" disabled style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item v-if="result.settlementFormType==1" label="运量" prop="cargoWeight">
						<div style="width: 300px">
							<el-input v-model="SettlementForm.cargoWeight" disabled style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="应付金额" :prop="result.settlementFormType==0?payableAmount:''">
						<div style="width: 300px">
							<el-input v-model="SettlementForm.payableAmount" disabled style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item :label="result.settlementFormType==0?'实付金额':'现金收款'" :prop="result.settlementFormType==0?actualPayment:''">
						<div style="width: 300px">
							<el-input type="number" :disabled="result.settlementFormType==0?false:true" v-model="SettlementForm.actualPayment"
								style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item v-if="result.settlementFormType==1" label="卸货点">
						<div style="width: 300px">
							<el-input disabled v-model="SettlementForm.addr" style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item v-if="result.settlementFormType==0" label="支付密码" prop="outPwd">
						<div style="width: 300px">
							<el-input v-model="SettlementForm.outPwd" style="width: 300px"></el-input>
						</div>
					</el-form-item>
					<el-form-item v-if="result.settlementFormType==0" label="备注" prop="notes">
						<div style="width: 300px">
							<el-input type="textarea" maxlength="30" v-model="SettlementForm.notes" show-word-limit
								style="width: 300px"></el-input>
						</div>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogSettlement = false">取消</el-button>
					<el-button @click="payDriver1(2)" v-if="result.settlementFormType==1">驳回</el-button>
					<el-button type="primary" @click="payDriver1(1)" v-if="result.settlementFormType==1">通过</el-button>
					<el-button type="primary" v-if="result.settlementFormType==0"
						@click="payDriver('SettlementForm')">确定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import breadcrumb from "@/components/breadcrumb.vue";
	import titleVue from "@/components/titleVue.vue";
	import httpApi from "@/http";
	export default {
		data() {
			let validatePayRule = (rule, value, callback) => {
				let regular = /^([1-9]\d*(\.\d*[1-9][0-9])?)|^(0\.\d*[1-9][0-9])$|^(0\.\d*[1-9])$/

				if (value == '') {
					callback(new Error('金额不能为空'))
				} else if (value.split('.').length > 2) {
					callback('只能有一个小数点')
				} else if (!regular.test(value)) {
					callback(new Error('请输入正确面额金额'))
				} else {
					callback()
				}
			};
			return {
				active: '1',
				result: {},
				waybillInfo: {},
				driverBillId: "",
				detailsData: {},
				AuditForm: {
					amount: "",
					auditDeduction: "",
					driverBillId: "",
					billAmount: "",
					settlementAmount: "",
					accountsDeduct: "",
				},
				AuditRules: {
					billAmount: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
					settlementAmount: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}, ],
					accountsDeduct: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}, ],
				},
				//结算弹出框
				dialogSettlement: false,
				SettlementForm: {
					payableAmount: "", //应付金额
					actualPayment: "",
					cashReceipts: "",
					addr: "",
					notes: "",
					outPwd: '',
					projectName:"",
					cargoWeight:0
				},
				SettlementRules: {
					payableAmount: [{
						required: true,
						message: "应付金额不能为空",
						trigger: "blur"
					}, ],
					actualPayment: [{
						required: true,
						message: "请输入金额",
						trigger: "blur"
					}, ],
					outPwd: [{
						required: true,
						message: "请输入密码",
						trigger: "blur"
					}, ],
					notes: [{
						max: 30,
						message: "最大30个字符",
						trigger: "blur"
					}, ],
				},
			};
		},
		methods: {
			getDetails() {
				this.driverBillId = this.$route.params.driverBillId;
				let params = {
					driverBillId: this.driverBillId
				};
				httpApi.selfOperatedSettlementApi.getPaymentDetail(params).then((res) => {
					this.result = res.data.data;
					this.waybillInfo = res.data.data.waybillInfo
					this.AuditForm.driverBillId = res.data.data.driverBillId;
					////console.log("详情数据", res.data.data);
				});
			},
			GoWaybillDetail(waybillId) {
				this.$router.push("/home/selfOperatedWaybill/details/" + waybillId);
			},
			openDialog() {
				this.dialogVisible = true;
			},
			closeDialog() {
				this.dialogVisible = false;
			},
			submitForm(AuditForm) {
				this.$refs[AuditForm].validate((valid) => {
					if (valid) {
						let parmas = {
							settlementAmount: this.AuditForm.settlementAmount,
							billAmount: this.AuditForm.billAmount,
							abnormalDeduction: this.AuditForm.accountsDeduct,
							driverBillId: this.AuditForm.driverBillId,
						};
						httpApi.SettlementDocApi.calculateSettlement(parmas).then((res) => {
							if (res.data.code == 200) {
								this.$router.go(0);
							} else {
								return false;
							}
						});
					} else {
						////console.log("error submit!!");
						return false;
					}
				});
			},
			isShowDialog(result) {
				this.SettlementForm = {
					payableAmount: "", //应付金额
					actualPayment: "",
					addr: "",
					notes: "",
					cargoWeight:"",
					projectName:""
				};
				this.SettlementForm.payableAmount = result.billAmount;
				if (result.settlementFormType == 0) {
					this.SettlementForm.actualPayment = result.billAmount;
				} else {
					this.SettlementForm.actualPayment = result.cashReceipts;
					this.SettlementForm.addr = result.addr;
					this.SettlementForm.cargoWeight = result.cargoWeight;
					this.SettlementForm.projectName = result.projectName;
				}
				this.dialogSettlement = true;
			},
			// 结算
			payDriver(SettlementForm) {
				this.$refs[SettlementForm].validate((valid) => {
					if (valid) {
						let params = {
							driverBillId: this.result.driverBillId,
							payAmount: this.SettlementForm.actualPayment,
							remark: this.SettlementForm.notes,
							billAmount: this.SettlementForm.payableAmount,
							settlementAmount: this.SettlementForm.actualPayment,
							statementExplain: this.SettlementForm.notes,
							outPwd: this.SettlementForm.outPwd,
							settlementFormType: 1
						};
						httpApi.carrierSettlementApi.orderApplyForPay(params).then((res) => {
							if (res.data.code == 200) {
								this.$message.success("结算成功");
								this.$router.go(0);
								this.dialogSettlement = false;
							}
						});
					} else {
						return false;
					}
				});
			},
			payDriver1(ind) {
				let params = {
					status: ind,
					keyWord: this.SettlementForm.notes,
					money: this.SettlementForm.actualPayment,
					driverBillId: this.result.driverBillId
				}
				let str = ind==1?"确认通过该司机的结算单?":"确认驳回该司机的结算单?"
				if (confirm(str)) {
					httpApi.carrierSettlementApi.modifyDriverProject(params).then((res) => {
						if (res.data.code == 200) {
							this.$message.success("操作成功");
							this.$router.go(0);
							this.dialogSettlement = false;
						}
					});
				}

			},
		},
		mounted() {
			this.getDetails();
			////console.log();
		},
		components: {
			titleVue,
			breadcrumb,
		},
	};
</script>

<style lang="scss" scoped>
	.titleBox {
		flex: 1;
		background-color: #fff;
		height: 119px;
		display: flex;
		align-items: center;
		padding: 0 35px;
		margin-bottom: 9px;

		.feeGroup {
			margin-left: auto;
			display: flex;

			.feeBox {
				display: flex;
				width: 180px;
				align-items: center;

				.intervalLine {
					width: 2px;
					height: 64px;
					background-color: #f0f0f0;
					margin-right: 20px;
				}

				.feeItem {
					display: flex;
					flex-direction: column;
					margin-right: 20px;

					.tit {
						color: #a3a3a3;
						font-size: 12px;
						margin-bottom: 14px;
					}

					.price {
						color: #262626;
						font-size: 18px;
						font-weight: Bold;
					}
				}
			}
		}

		.icon-dingdan {
			font-size: 43px;
			margin-right: 10px;
		}

		.infoBox {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.info_line1 {
				margin-bottom: 3px;
				display: flex;
				align-items: center;

				>.tit {
					font-size: 18px;
					font-family: Microsoft YaHei;
					font-weight: bold;
					margin-right: 8px;
					color: #262626;
				}

				>.tag {
					background-color: #ecf5fe;
					border-radius: 4px;
					width: 54px;
					height: 20px;
					color: #1890ff;
					font-size: 10px;
					text-align: center;
					line-height: 20px;
				}
			}

			.info_line2 {
				display: flex;
				color: #939393;
				font-size: 12px;
			}
		}

		.examineBtn {
			background-color: #1890ff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			color: #ffffff;
			font-size: 12px;
			width: 80px;
			height: 36px;
			cursor: pointer;
			margin-left: auto;

			&:hover {
				opacity: 0.8;
				transition: 0.2s;
			}
		}
	}

	.main {
		padding: 35px;
		background-color: #fff;
		height: calc(100vh - 255px);
		//overflow-y: scroll;

		.main_item {
			margin-bottom: 40px;

			.tag {
				width: 63px;
				height: 28px;
				font-size: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 4px;

				.dian {
					width: 4px;
					height: 4px;
					border-radius: 50%;
					margin-right: 4px;
				}

				// 待派车标签 样式
				&.waitDispatch {
					background-color: #fffce8;
					color: #f9aa0d;

					.dian {
						background-color: #f9aa0d;
					}
				}

				&.gery {
					background-color: #f7f8f8;
					color: #a8b0b6;

					.dian {
						background-color: #a8b0b6;
					}
				}

				//已派车 和运输中 样式
				&.dispatched {
					background-color: #ecf5fe;
					color: #1890ff;

					.dian {
						background-color: #1890ff;
					}
				}

				//已完成
				&.complete {
					background-color: #ebfef5;
					color: #1acb7a;

					.dian {
						background-color: #1acb7a;
					}
				}

				//已取消
				&.Canceled {
					background-color: #fde8e9;
					color: #f5222d;

					.dian {
						background-color: #f5222d;
					}
				}
			}


		}
	}

	.AuditDialog {
		::v-deep .el-dialog__header {
			border-bottom: 1px solid #f0f0f0;
			color: #262626;
			font-size: 14px;
			font-weight: bold;
			padding: 0 20px 0px;
			height: 50px;
			line-height: 50px;
		}

		.demoForm {
			::v-deep .el-form-item__label {
				color: #262626;
				font-size: 12px;
				font-weight: bold;
			}

			.Btn {
				height: 36px;
				width: 80px;
				font-size: 12px;
			}

			a {
				color: red !important;
			}
		}
	}
</style>